<template>
  <div ref='editor'></div>
</template>

<script setup>
import WangEditor from 'wangeditor';
import {   onMounted,ref   } from 'vue';
// 引入代码高亮组件
import hljs from 'highlight.js';
// 此方法用来调用父组件方法
const emit = defineEmits([ "changContentHtml" ]);

const props = defineProps({
  // 编辑器高度
  height:{
    type:Number,
    required:true,
    default:150
  }
})

const editor = ref(null);
// 定义超高压输给
let instance;

onMounted(() => {
  instance = new WangEditor(editor.value)
  instance.config.showLinkImg = false
  instance.config.showLinkImgAlt = false
  instance.config.showLinkImgHref = false
  instance.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
  instance.config.uploadFileName = 'file'
  // 设置编辑器高度
  instance.config.height = props.height;
  // 代码高亮
  instance.highlight = hljs;
  instance.config.uploadImgHeaders = {
    token: ''// 上传接口所需token
  }
  // 自定义菜单
  instance.config.menus = [
    // 'head',
    'bold', //字体加粗
    'fontSize',//字号
    'fontName',//字体
    // 'italic',
    'underline',//下划线
    'strikeThrough',//删除线
    // 'indent',
    // 'lineHeight',
    'foreColor',
    // 'backColor',
    'link',
    // 'list',//列表
    // 'todo',
    // 'justify',//对其
    // 'quote',// 引用
    'emoticon',
    'image',
    //'video',//视频
    // 'table',//表格
    'code',
    // 'splitLine',
    // 'undo',//撤销
    // 'redo',//恢复
  ];
  // 图片返回格式不同，这里需要根据后端提供的接口进行调整
  instance.config.uploadImgHooks = {
    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
    customInsert: function(insertImgFn, result) {
      // result 即服务端返回的接口
      // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
      if (result && result.code === 200) {
        console.log(result.data.prefixFileName);
        // 单图时 insertImgFn函数接收的是返回图片的全地址，eg:http://img.xxx.com/image/20211025/96759ce5aab246e6860f72a364e4142a.jpg
        insertImgFn(result.data.prefixFileName);
        // 多图时，循环调用insertImgFn
        // result.result.forEach(item => insertImgFn(item.url))
      }
    }
  }
  // 你自己上传图片的接口地址
  instance.config.uploadImgServer = process.env.VUE_APP_BASE_API + '/upload/upload';
  Object.assign(instance.config, {
    onchange() {
      console.log('发生变化，富文本内容为：', instance.txt.html());
      // 改变父组件的内容
      emit('changContentHtml',instance.txt.html());
    },
  })
  instance.create();
})

/** 清空内容 */
function clearHtml(){
  instance.txt.clear();
}

//暴露方法 必须暴露别人才能获取得到
defineExpose({
  clearHtml
})
</script>

<style scoped>

</style>
